<!--登录页-->
<style scoped lang="less">
    .bg-white:after{
      content:'';
      position:fixed;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      z-index: -1;
    }
    .login-btn{
      height:48px;
      width:100%;
      line-height: 48px;
      background:rgba(119,186,189,1);
      border-radius:4px;
      text-align: center;
      color: #fff;
      font-size: 18px;
      cursor:pointer !important;
    }
    .login-vision{
      text-align: center;
      font-size:12px;
      color:rgba(191,191,191,1);
      margin:25px 0 0;
      line-height: 1;
      height: 12px;
    }
    .login-box{
      transform:translate(-50%,-50%);
      position: absolute;
      top:45%;
      left: 50%;
      width: 100%;
    }
    .login-forget{
      text-align: right;
      line-height: 1;
      padding:10px 0;
      margin:0 0 40px;
    }
    .login-forget a {
      color: #BFBFBF;
      text-decoration: none;
    }
    .logo-img{
      width: 2.76rem;
      margin:0 auto 0.34rem;
      text-align: center;
    }
    .logo-img img{
      width: 100%;
    }
    .logo-img .name{
      font-size: 0.28rem;
      color: #606F7A;
      line-height: 0.65rem;
      height: 0.65rem;
    }
    .login-footer{
      position: fixed;
      bottom: 0;
      width: 100%;
      left: 0;
      background:url('~images/bg/login_bg.png') no-repeat;
      background-size: 100% auto;
      height: 1.43rem;
    }
    .login-wrap {
      padding: 0 30px;
    }
    .login-form {
      height: 52px;
      position: relative;
    }
    .login-form input {
      float: left;
      width: 100%;
      height: 14px;
      padding: 30px 5px 8px;
      font-size: 16px;
      border: none;
      outline: none;
    }
    .login-form:after,
    .login-form:before {
      background: #EFEFEF;
      content: '';
      width: 100%;
      height: 1px;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .login-form:before {
      height: 1px;
      z-index: 2;
      background: #23a5a5;
      transform: scalex(0);
      transition: transform .45s;
    }
    .login-form.focus-line:before {
      transform: scalex(1);
    }
</style>

<template>
  <div class="bg-white">
    <div id="loadMask" class="loader-base" style="display:none">
      <div class="loader-wrap"></div>
    </div>
    <div class="login-box">
      <div class="logo-img">
        <img src="~images/logo/logo1.png">
        <!-- <div class="name">透明 · 智慧 · 共享</div> -->
      </div>
      <div class="login-wrap">
        <div class="login-form" 
            :class="{'focus-line':onfocus}">
          <input type="tel" placeholder="请输入账号"
            v-model="userName"
            :readonly="iptreadonly" 
            @focus="iptfocus"
            @blur="iptblur"></div>
        <div class="login-form" :class="{'focus-line':onfocus2}">
          <input type="password" placeholder="请输入密码"
            :readonly="iptreadonly2" 
            @focus="iptfocus2"
            @blur="iptblur2"
            v-model="userPwd"></div>
        <div class="login-forget cf">
          <a class="f-r" href="/#/user/password?forget=1">忘记密码</a>
        </div>
        <input type="button" class="login-btn" @click="login()" :value="btnTxt" :disabled="btndisable">
        <div class="login-vision">版本号：ll.SH.3.0.1</div>
      </div>
    </div>
    <div class="login-footer"></div>

    <actionsheet v-model="showPicker" :menus="choices" @on-click-menu="handleClick" :close-on-clicking-mask="false" show-cancel>
      <div slot="header">
        <div class="form-wrap">
          <div class="form-choice">
            <p style="color:#000; font-size: 18px; line-height:30px;">您需要登录哪个账户？</p>
            <p style="color:#666;font-size:12px; line-height:20px;">请注意区分所在公司</p>
          </div>
        </div>
      </div>
    </actionsheet>


  </div>

</template>
<script>
  import md5 from 'js-md5';
  export default{
    data(){
      return{
        userName:'',
        userPwd:'',
        onfocus:false,
        onfocus2:false,
        btnTxt:'登 录',
        iptreadonly:false,
        iptreadonly2:false,
        btndisable:false,

        showPicker: false,
        choices: [],
        gettedDatas: []
      }
    },
    created(){
      this.savePw();
      // this.$vux.toast.text('该用户不是收货方', 'middle');
    },
    methods:{
      savePw() {
        if (localStorage.userinfo) {
          var use = JSON.parse(localStorage.userinfo);
          this.userName = use.LogonUser;
          this.userPwd = use.Pwd;
          this.login();
        }
      },
      getQueryString(name){
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
      },
      login(){
        let self = this;
        // 用户名
        if (!this.userName) {
          this.Toast({
            message:'请输入用户名'
          })
          return;
        };
        // 密码
        if (!this.userPwd) {
          this.Toast({
            message:'密码不能为空'
          })
          return;
        };

        let code = this.getQueryString('code'),
            params = {
              LogonUser: this.userName,
              Pwd:md5(this.userPwd),
              WeChatCode: code
            };

        this.btnForbid();

        this.Ajax.post('MultipleLogin', params).then((res) => {
          if (res.IsSuccess) {
            if(res.ErrorMessage != null) {
              this.$vux.alert.show({
                content: res.ErrorMessage,
                buttonText:'继续',
                onHide () {
                  self.proceedLogin(res.Datas)
                }
              })
            } else {
              this.proceedLogin(res.Datas)
            }
          } else {
            this.$vux.alert.show({
              content: res.ErrorMessage,
              buttonText:'确定',
              onShow () {},
              onHide () {}
            })
          }
          this.btnCancel();
        });
      },

      proceedLogin(datas){
        if(localStorage.userinfo) {
          let saved = JSON.parse(localStorage.userinfo);
          this.doLogin(saved);
        } else {
          if(datas.length == 1) {
            this.doLogin(datas[0]);
          } else {
            this.choices = [];
            this.showPicker = true;
            this.gettedDatas = datas;
            datas.forEach(x => {
              this.choices.push(
                {
                  label: `${x.BelongName}`,
                  value: x.StaffID,
                  type:'primary'
                });
            })
          }
        }
      },

      handleClick(e){
        let picked = this.gettedDatas.find(x => {
          return x.StaffID == e;
        })
        this.doLogin(picked);
      },

      doLogin(udt){
        udt.Pwd = this.userPwd;
        localStorage.userinfo = JSON.stringify(udt);
        console.log(udt)
        if (udt.UserBizType == 'Receiver') {
          this.$router.push({
            path: "/index"
          });
        } 
        else {
          this.Toast({
            message:'该用户不是收货方'
          });
        }
      },

      iptfocus(){
        this.onfocus = true;
      },
      iptblur(){
        this.onfocus = false;
      },
      iptfocus2(){
        this.onfocus2 = true;
      },
      iptblur2(){
        this.onfocus2 = false;
      },
      //按钮恢复禁用
      btnCancel(){
        this.btnTxt = "登 录";
        this.iptreadonly = false;
        this.iptreadonly2 = false;
        this.btndisable = false;
      },
      //按钮禁用
      btnForbid(){
        this.btnTxt = "正 在 登 录 中 ...";
        this.iptreadonly = true;
        this.iptreadonly2 = true;
        this.btndisable = true;
      },
    }
  }
</script>